// 获取弹幕容器
var container = document.getElementById('container');
// 定义弹幕数据
var data = [{
		text: '这是第一条弹幕',
		color: 'red'
	},
	{
		text: '这是第二条弹幕',
		color: 'green'
	},
	{
		text: '这是第三条弹幕',
		color: 'blue'
	}
];
// 定义弹幕速度
var speed = 2;
// 定义弹幕间隔
var interval = 1000;
// 定义弹幕位置
var topArr = [];
for (var i = 0; i < 10; i++) {
	topArr.push(i * 30);
}
// 定义弹幕索引
var index = 0;
// 定义弹幕定时器
var timer = setInterval(function() {
	// 获取弹幕数据
	var bullet = data[index];
	// 创建弹幕元素
	var span = document.createElement('span');
	span.className = 'bullet';
	span.innerText = bullet.text;
	span.style.color = bullet.color;
	// 随机获取弹幕位置
	var top = topArr[Math.floor(Math.random() * topArr.length)];
	span.style.top = top + 'px';
	// 将弹幕元素添加到容器中
	container.appendChild(span);
	// 计算弹幕宽度
	var width = span.offsetWidth;
	// 定义弹幕起始位置
	var left = container.offsetWidth;
	span.style.left = left + 'px';
	// 定义弹幕移动定时器
	var bulletTimer = setInterval(function() {
		// 计算弹幕当前位置
		left -= speed;
		span.style.left = left + 'px';
		// 判断弹幕是否移出容器
		if (left < -width) {
			// 移除弹幕元素
			container.removeChild(span);
			// 清除弹幕移动定时器
			clearInterval(bulletTimer);
		}
	}, 10);
	// 更新弹幕索引
	index++;
	if (index >= data.length) {
		index = 0;
	}
}, interval);